<template>
  <div>
    <div id="box2">
      <img  v-show="show" src="@/assets/img/kxq-img/nulll.jpg" alt="" />
      <img  v-show="!show" src="@/assets/img/kxq-img/kalrry.jpg" alt="" />
      <div class="login">
        <div v-show="show">
          <a href=""><router-link to="/Login" style="color:grey">登录</router-link></a
          >/ <a href=""><router-link to="/Register" style="color:grey">注册</router-link></a
          ><br />
          <span>获赞0</span>&nbsp;
          <span>关注0</span>&nbsp;
          <span>粉丝0</span>
        </div>

        <div class="c8" v-show="!show">
          <span id="s4">用户：{{ username }}</span>
          <br />
          <span>获赞5</span> &nbsp; <span>关注20</span> &nbsp;
          <span>粉丝1100</span>&nbsp;
          <span id="outlogin" @click="outlogin()"><router-link to="/" style="font-size: 0.1rem; border: 1px solid grey; color: grey; border-radius: 10px;"> 退出登录 </router-link></span>
        </div>
      </div>
      <div class="zhuye">
        <a href=""><router-link to="/Self">主页></router-link></a>
      </div>
    </div>

    <!-- 登录注册下一版块 -->
    <div id="box3">
      <div class="left">
        <div class="left1">
          <h4>0.1元周卡</h4>
          <p>特邀限时专享</p>
        </div>
        <span>|</span>
        <div class="left2">
          <h4>得会员天数</h4>
          <p>最高666天</p>
        </div>
      </div>
      <div class="right">
        <h4>聚星卡</h4>
        <p style="font-size: 10px; text-align: left; margin-left: 0.15rem">
          看舞者幕后
        </p>
      </div>
    </div>

    <!-- 下载、历史记录 -->
    <div id="box4">
      <ul>
        <li>
          <a href="">
            <span class="iconfont home-download" style="color: blue"></span>
            <p>我的下载</p>
          </a>
        </li>
        <li>
          <a href=""
            ><router-link to="/Jilu">
              <span class="iconfont home-history" style="color: green"></span>
              <p>历史记录</p></router-link
            >
          </a>
        </li>
        <li>
          <a href=""
            ><router-link to="/Collection">
              <span
                class="iconfont public-shoucang"
                style="color: purple"
              ></span>
              <p>收藏预约</p></router-link
            >
          </a>
        </li>
        <li>
          <a href=""
            ><router-link to="/Order">
              <span class="iconfont my-youkugou" style="color: red"></span>
              <p>我的购买</p></router-link
            >
          </a>
        </li>
      </ul>
    </div>

    <!-- 创作中心 -->
    <div id="box5">
      <div class="cz">
        <h3>
          创作中心
          <a href="">作品管理.发布作品.入驻优酷号V</a>
        </h3>
      </div>
      <div class="cj">
        <img
          src="../../../assets/img/yzk-img/481988ff12258c18d43dac62b0513ca_03.gif"
        />
        <div class="cj1">
          <h5>好消息好消息</h5>
          <p>邀请你点亮抽奖大转盘</p>
        </div>
        <img
          src="../../../assets/img/yzk-img/481988ff12258c18d43dac62b0513ca_06.gif"
          class="iii1"
        />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Center",
  data() {
    return {
      show: true,
      cont: {},
    };
  }, 
  created() {
    this.loadComments();
    // 与后端链接的开始
    // 根据登录后的用户名获取用户信息
    axios({
      url: "/my/login",
      method: "post",
    }).then((res) => {
      this.cont = res.data;
    });
    // 与后端链接的结束

    // this.$store.dispatch("LINK_LOGIN_DATA","/my/login")

  },
  methods: {
    outlogin() {
      localStorage.clear();
      this.$router.push("/My");
    },
    loadComments() {
      let list = localStorage.getItem("username");
      this.username = list;
      if (list) {
        this.show = false;
      } else {
        this.show = true;
      }
    },
  },
};
</script>

<style scoped>
@import url("../../../assets/iconfont/iconfont.css");
a {
  color: black;
}
.c8{
  /* border: 1px solid; */
  width: 2.5rem;
  height: .4rem;
}
#box2 {
  width: 100%;
  height: 0.85rem;
  /* display: flex; */
  padding: 0 .15rem;
  box-sizing: border-box;
  position: relative;
  /* border: 1px solid; */


}
#box2 img {
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  top: 50%;
  bottom:50%;
  transform: translateY(-50%);
  
}
#box2 .login {
  width: 2.4rem;
  height: 0.85rem;
  padding-top: 0.16rem;
  box-sizing: border-box;
  margin-right: 1.4rem;
  /* border: .01rem solid; */
  position: absolute;
  left: .85rem;
}
#box2 a {
  color: black;
}
#box2 .zhuye {
  width: 0.55rem;
  height: 0.3rem;
  background-color: #fff;
  border-radius: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.12rem;
  margin-top: 0.24rem;
  position: absolute;
  right: 0.15rem;
  border: 1px solid grey;
  color: grey;

}
#box2 .login a {
  font-size: 0.2rem;
  font-weight: 600;
}
#box2 .login span {
  font-size: .09rem;
  -webkit-transform: scale(0.833);
  color: grey;
}
/* 登录注册下一版块 */
#box3 {
  width: 100%;
  height: 0.7rem;
  text-align: center;
  box-sizing: border-box;
  padding: 0 .15rem;
  position: relative;
  color: #5f5f5f;
}
#box3 .left {
  width: 2.8rem;
  height: 0.7rem;
  background-color: #fefaf7;
  float: left;
  border: 1px solid #ddd2a5;
  border-radius: 5px;
  display: flex;
  position: absolute;
  left: .15rem;

}
#box3 .left .left1 {
  width: 49%;
  height: 0.7rem;
}
#box3 .left .left1 h4 {
  margin-top: 0.15rem;
  font-size: 0.15rem;
}
#box3 .left .left1 p {
  font-size: 0.12rem;
}
#box3 .left .left2 {
  width: 49%;
  height: 0.7rem;
}
#box3 .left .left2 h4 {
  margin-top: 0.15rem;
  font-size: 0.15rem;
}
#box3 .left .left2 p {
  font-size: 0.12rem;
}
#box3 .left span {
  font-size: 0.37rem;
  margin-top: 7px;
}
#box3 .right {
  width: 0.9rem;
  height: 0.7rem;
  background-color: #ffffff;
  float: left;
  border: 1px solid #c7c9e0;
  border-radius: 5px;
  
  position: absolute;
  right: .15rem;
}
#box3 .right h4 {
  font-size: 0.13rem;
  margin-top: 0.16rem;
  margin-bottom: 0.01rem;
  text-align: left;
  margin-left: 0.15rem;
}

/* 下载、历史记录 */
#box4 {
  width: 100%;
  height: 0.97rem;
  box-sizing: border-box;
  /* background-color: rgb(212, 212, 212); */
  /* border: .01rem solid; */

}
#box4 ul {
  height: 100%;
  background-color: #fff;
  display: flex;
  
}
#box4 ul li {
  width: 25%;
  text-align: center;
}
#box4 ul li a span {
  font-size: 0.26rem;
  margin-top: 0.25rem;
  margin-bottom: 0.03rem;
  display: block;
}
#box4 ul li a p {
  font-size: 0.14rem;
}

/* 创作中心 */
#box5 {
  height: 1.38rem;
  box-sizing: border-box;
  border: 0.01rem solid rgb(204, 204, 204);
  border-radius: .1rem;
  margin: 0 15px;
}
#box5 .cz {
  height: 0.5rem;
  background-color: #fff;
  border-radius: .1rem .1rem 0rem 0rem;
  box-sizing: border-box;
  border-bottom: .01rem solid rgb(228, 228, 228);
  /* border: 1px solid; */
  position: relative;
}
#box5 .cz h3 {
  width: 100%;
  height: 0.5rem;
  line-height: 0.5rem;
  position: absolute;
  left: 0;
}
#box5 .cz h3 a {
  font-size: 0.09rem;
  font-weight: normal;
  position: absolute;
  right: 0;

}

#box5 .cj {
  height: 0.88rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* box-sizing: border-box;
  border: 1px solid; */
}
#box5 .cj img:nth-child(1) {
  float: left;
  width: 0.55rem;
  height: 0.55rem;
}
#box5 .cj .cj1 {
  height: 45px;
  /* box-sizing: border-box;
  border: 1px solid; */
}
#box5 .cj .iii1 {
  width: 1.2rem;
  height: 0.5rem;
  margin-right:.04rem;
  /* border: .01rem solid; */
}
#box5 .cj .cj1 h5 {
  text-align: left;
}
</style>